<template>

    <ul class="list-group mt-4">
      <li
        :key="item.id"
        v-for="item in filterList"
        class="list-group-item d-flex justify-content-between"
      >
        <div class="form-check d-inline-block">
          <input
           @change="$emit('oneChecked',item.id)"
           :checked="item.done"
            class="form-check-input"
            type="checkbox"
            :id="'label'+item.id"
          />
          <label
            class="form-check-label"
            :class="{ 'text-decoration-line-through': item.done }"
            :for="'label'+item.id"
            >{{ item.html }}</label
          >
        </div>

        <button @click="$emit('del',item.id)" class="btn-close"></button>
      </li>
    </ul>
</template>

<script>

export default {
  props:["filterList"],
  data() {
    return {
    }
  },
  methods: {
   
  },

  computed: {
    
  },
};
</script>
<style>
</style>